<!-- Dom模板 -->
<template>
  <div id="box">
    <div class="content">
      <h2>购买</h2>
      <!-- {{bookId}} -->
      <ul>
        <li
          @click="click(item, index)"
          :class="nowIndex === index ? 'active' : ''"
          v-for="(item, index) in data"
          :key="index"
        >
          <p>{{ item.content }}</p>
          <span class="VIP" v-if="item.price == 0">{{
            yuan == "1" ? "VIP免费" : "240Maco蛋"
          }}</span>
          <span v-if="item.price != 0">{{ item.price }}Maco蛋</span>
        </li>
      </ul>
      <div class="button">
        <button @click="close">购买</button>
        <button @click="closes" class="cancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import * as api from "../../../api/home";

export default {
  props: ["bookId", "itemJi", "yuan", "bookData"],
  data() {
    return {
      msg: "测试",
      alertFlag: false,
      nowIndex: 0,
      item: {
        id: this.bookData[0].bookId,
        content: "全集",
        price: "240",
      },
      data: [
        {
          id: this.bookData[0].bookId,
          content: "全集",
          price: "240",
        },
        {
          id: this.bookData[2].introduceId,
          content: "第三集",
          price: "30",
        },
        {
          id: this.bookData[3].introduceId,
          content: "第四集",
          price: "40",
        },
        {
          id: this.bookData[4].introduceId,
          content: "第五集",
          price: "50",
        },
        {
          id: this.bookData[5].introduceId,
          content: "第六集",
          price: "60",
        },
        {
          id: this.bookData[6].introduceId,
          content: "第七集",
          price: "70",
        },
      ],
      hua: true,
      // bookId:''
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.data);
    // this.bookId = bookId
    console.log(this.bookId, this.itemJi.introduceId);
  }, // Vue方法定义
  methods: {
    click(item, index) {
      this.nowIndex = index;
      this.item = item;
    },
    close() {
      api
        .xiaofeiqu({ weiyide: this.$store.state.order.user.title })
        .then((res) => {
          console.log(res.data.code - this.item.price);
          if (res.data.code - this.item.price >= 0) {
            api
              .xiaofei({
                jian: this.item.price,
                weiyi: this.$store.state.order.user.title,
              })
              .then((res) => {});
            api
              .buyQuan({
                allid: this.item.id,
                phones: this.$store.state.order.user.title,
              })
              .then((res) => {});
            if (this.item.content === "全集") {
              this.bookData.forEach((item, index) => {
                console.log(item.introduceId);
                api.tupianType({ allids: item.introduceId }).then((res) => {
                  console.log(res);
                });
              });
            } else {
              api.tupianType({ allids: this.item.id }).then((res) => {
                console.log(res);
              });
            }
            this.$emit("close", { flag: false, flags: false });
          } else {
            this.$emit("close", { flag: false, flags: true });
          }
        });
      // api
      //   .xiaofei({
      //     jian: this.item.price,
      //     weiyi: this.$store.state.order.user.title,
      //   })
      //   .then((res) => {
      //     console.log(res.data.code)
      //     if (res.data.code==='成功') {
      //       console.log(123);
      //       api
      //         .buyQuan({
      //           allid: this.item.id,
      //           phones: this.$store.state.order.user.title,
      //         })
      //         .then((res) => {});
      //       if (this.item.content === "全集") {
      //         this.bookData.forEach((item, index) => {
      //           console.log(item.introduceId);
      //           api.tupianType({ allids: item.introduceId }).then((res) => {
      //             console.log(res);
      //           });
      //         });
      //       } else {
      //         api.tupianType({ allids: this.item.id }).then((res) => {
      //           console.log(res);
      //         });
      //       }
      //     }else{
      //       this.$emit("close");
      //     }
      //   });
    },
    closes() {
      this.$emit("close", { flag: false, flags: false });
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
#box {
  position: fixed;
  width: 100vw;
  border-radius: 30px 30px 0 0;
}
.content {
  position: fixed;
  bottom: 0;
  width: 100vw;
  background: white;
}
.content h2 {
  width: 50px;
  margin: 10px auto;
}
ul {
  width: 100vw;
  height: 160px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}
ul li {
  width: 31%;
  border: solid #ccc 1px;
  padding: 10px 0;
  border-radius: 10px;
}
ul .active {
  border: solid 1px #cf7d69;
}
ul li p {
  margin-bottom: 5px;
}
ul li .VIP {
  font-size: 18px;
  color: #cd986d;
  font-weight: bold;
}
ul li span {
  color: #be8063;
}
.content .button {
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
button {
  width: 40%;
  padding: 5px 0;
  display: block;
  margin: 15px auto;
  border-radius: 25px;
  border: none;
  color: white;
  background: #f86742;
  font-size: 18px;
}
.cancel {
  color: black;
  background: #ccc;
}
</style>